<template>
    <div class="container">
        <div class="header">
            <ul>
                <router-link tag="li" :to="item.path" v-for = "(item, index) of list" :key = "index">
                    <p>{{item.name}}</p>
                </router-link>
            </ul>
        </div>
        <div class="tit">关注你感兴趣的人</div>
        <div class="content">
            <div class="con" @click="keep(index)" v-for="(item, index) of keeplist" :key="index">
                <img src="../assets/smalllogo.jpg" alt="" srcset="">
                <i class="iconfont icon-duihao1" v-show="item.hide"></i>
                <span>{{item.name}}</span>
                
            </div>
            
        </div>
        <router-link class="gz" to="/gz" tag="div">一键关注</router-link>
    </div>
</template>

<script>
export default {
    name:'Lift',
    data(){
        return{
            list: [{
                name:'关注',
                path: '/life'
            }, {
                name:'社区',
                path: '/community'
            }, {
                name:'优品',
                path: '/up'
            }],
            hide:true,
            keeplist: [{
                name: 'vivi妈妈',
                span: '生活达人',
                hide:true
            }, {
                name: '爱猫de',
                span: '生活达人',
                hide:true
            }, {
                name: '我有一只猫',
                span: '生活达人',
                hide:false
            }, {
                name: '爱猫的妈妈',
                span: '生活达人',
                hide:true
            }]

        }
    },
    methods: {
    keep (index) {
      this.$emit("get",this.keeplist)
      this.keeplist[index].hide=!this.keeplist[index].hide
      //console.log(index)
      //console.log(this)
    }
    // allkeep () {

    // }
  },
    mounted() {
        this.$emit('toparent',this.tit)
    },
}
</script>

<style scoped>
    .container{
        height: 100%;
    }
    .header ul{
        display: flex;
        padding: 2% 20%;
        justify-content: space-between;
        background: #26A2FF
               
    }
    .header ul li{
        flex: 1;
        width: 15%;
        text-align: center
    }
    .header li p{
        color: white
    }
    .header ul li:first-child{
        background: rgb(70, 172, 250)
    }
    .tit{
        text-align: center;
        font-size: 14px;
        background: #ECDEBE;
        margin: 3% 32%
    }
    .content{
        height: 70%; 
        background: rgb(240, 231, 209);
        margin: 4% 2%;
        padding:4% 6%
    }
    .con{
        width: 70px;
        height: 100px;
        display: inline-block;
        margin: 1% 5%;
        text-align:center;
       
    }
    .con img{
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-bottom: 5px;
    }
    .con span{
        width: 70px;
        text-align:center;
    }
    .con i{
       position: absolute;
       top: 0;
       right: 0;
       color: #FFD100;
       font-size: 16px!important
    }
    .con{
        position: relative;
    }
    .gz{
        text-align: center;
        width: 30%;
        height: 30px;
        background: #ECDEBE;
        margin-bottom: 1px;
        margin:0 35% ;
        line-height: 30px;
        border-radius: 10px
    }
</style>
